import { useHistory } from "react-router-dom";
import { useEffect, useState } from "react";
import "./index.scss";
import { IndexBar, List, Toast, NavBar } from "antd-mobile/2x";
import api from "../../../api/home";
export const City = () => {
  const history = useHistory();

  const [cityList, setCityList] = useState<any>([]); //城市列表数据

  useEffect(() => {
    const getList = async () => {
      let res: any = await api.getCity({ level: 1 }); //总数据
      let resp: any = await api.getHot(); //热门城市

      setCityList((prev: any) => {
        //把热门数据变对象
        let hotArr = {
          id: 0,
          title: "热",
          lists: resp.body,
        };
        //set驱虫
        let arr = new Set();
        res.body.forEach((v: any) => {
          arr.add(v.short[0].toLocaleUpperCase());
        });
        //转化数组
        let newArr = Array.from(arr);
        //排序
        newArr.sort((a: any, b: any) => {
          //字符串对比localeCompare
          return a.localeCompare(b);
        });

        prev = newArr.map((v, i) => {
          let lists: any = [];
          res.body.forEach((item: any) => {
            if (item.short[0].toLocaleUpperCase() === v) {
              lists.push(item);
            }
          });

          return {
            id: i + 1,
            title: v, //字母
            lists, //对应城市
          };
        });
        prev.unshift(hotArr); //将热门推入首位
        return [...prev]; //返回拷贝后的完整数组
      });
    };
    getList();
  }, []);

  //点击城市判断是否有房源数据
  const onChangCity = async (item: any) => {
    //调用接口将城市名字传入 返回{
    // "label": "北京",
    // "value": "AREA|88cff55c-aaa4-e2e0"
    // }
    let res: any = await api.getInfo({ name: item.label });
    //判断有无房源
    if (res.body.label !== item.label) {
      Toast.show({
        content: "该城市暂无房源数据",
      });
    } else {
      //没有房源返回
      localStorage.setItem("city", item.label);
      localStorage.setItem("id", item.value);
      history.go(-1);
    }
  };
  return (
    <div className="city">
      <div className="navbar">
        <NavBar onBack={() => history.goBack()}>城市列表</NavBar>
      </div>
      <div className="cityListBox">
        <IndexBar>
          {cityList.length &&
            cityList.map((group: any) => {
              const { title, lists } = group;
              return (
                <IndexBar.Panel
                  index={title}
                  title={`${title}`}
                  key={`标题${title}`}
                >
                  <List>
                    {lists.map((item: any, index: number) => (
                      <List.Item
                        key={index}
                        onClick={() => {
                          onChangCity(item);
                        }}
                        arrow={false}
                      >
                        {item.label}
                      </List.Item>
                    ))}
                  </List>
                </IndexBar.Panel>
              );
            })}
        </IndexBar>
      </div>
    </div>
  );
};

export default City;
